<template>
    <div class="login">
        <div class="discriptbox"></div>
        <div class="login-form">
            <div v-if="qrShow" class="QRcode">
                <h2>{{downloadData.title}}登录</h2>
                <vue-qr :text="downloadData.url" :margin="0" colorDark="#000" colorLight="#fff" :logoSrc="downloadData.icon" :logoScale="0.2" :size="150"></vue-qr>
                <div class="tip">{{downloadData.title}}扫一扫,快速登录</div>
                <div class="refresh" @click="refreshQRcode">无法扫码？点击刷新二维码>></div>
                <div class="return" @click="returnLogin">账号密码登录</div>
            </div>
            <div v-else>
                <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" 
                @select="handleSelect"
                background-color="rgba(255,255,255,0)"
                text-color="#000"
                active-text-color="rgba(48, 102, 255, 1)"
                >
                    <el-menu-item index="1">账号登陆</el-menu-item>
                    <el-menu-item index="2">短信登录</el-menu-item>
                </el-menu>
                <div v-if="activeOption">
                    <el-form
                        ref="loginForm"
                        :model="loginForm"
                        :rules="loginRules"
                    >
                    <el-form-item class="userInput" prop="username">
                    <el-input
                        v-model="loginForm.username"
                        type="text"
                        auto-complete="off"
                        placeholder="账号"
                    >
                    </el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input
                            v-model="loginForm.password"
                            type="password"
                            auto-complete="off"
                            placeholder="密码"
                        >
                        </el-input>
                    </el-form-item>
                    <el-checkbox
                        v-model="loginForm.rememberMe"
                        style="margin:0px 0px 20px 0px;"
                    >记住密码</el-checkbox>
                    <label
                        class="forget"
                        @click="forgetPassword"
                    >忘记密码？</label>
                    </el-form>
                </div>
                <div v-else>
                    <el-form
                        ref="telephoneForm"
                        :model="telephoneForm"
                        :rules="telRules"
                    >
                    <el-form-item class="userInput" prop="phonenumber">
                    <el-input
                        v-model="telephoneForm.phonenumber"
                        type="text"
                        auto-complete="off"
                        placeholder="手机号码"
                    >
                    </el-input>
                    </el-form-item>
                    <el-form-item prop="code">
                        <el-input
                        v-model="telephoneForm.code"
                        auto-complete="off"
                        placeholder="验证码"
                        style="width: 63%"
                        @keyup.enter.native="handleLogin"
                        >
                        </el-input>
                        <div class="login-code">
                        <el-button  @click="sendClick" :disabled="disabled" type="primary" >{{btnTitle}} </el-button>
                        </div>
                    </el-form-item>
                    </el-form>
                </div>
                
                <!-- <el-form-item prop="code">
                    <el-input
                    v-model="loginForm.code"
                    auto-complete="off"
                    placeholder="验证码"
                    style="width: 63%"
                    @keyup.enter.native="handleLogin"
                    >
                    </el-input>
                    <div class="login-code">
                    <img :src="codeUrl" @click="getCode" class="login-code-img"/>
                    </div>
                </el-form-item> -->
                <div style="width:100%;margin-bottom:12px;">
                    <el-button
                        size="medium"
                        type="primary"
                        style="width:100%;"
                        @click.native.prevent="handleLogin"
                    >
                        <span v-if="!loading">登 录</span>
                        <span v-else>登 录 中...</span>
                    </el-button>
                </div>
                <div class="otherLogin" style="width:100%;">
                    <span class="discript">其他登录方式:</span>
                    <span class="img wechat" @click="wechatLogin"></span>
                    <span class="img dingding" @click="dingLogin"></span>
                    <span class="regist" @click="regist">立即注册</span>
                </div>
            </div>
            
        </div>
        <!--  底部  -->
        <div class="el-login-footer">
            <span></span>
        </div>
    </div>
</template>
<script>
import { getCodeImg } from "@/api/login";
import Cookies from "js-cookie";
import { encrypt, decrypt,encryptes } from '@/utils/jsencrypt'
import vueQr from 'vue-qr'
export default {
    name: "Login",
    components: {
        vueQr
    },
    data() {
        return {
            codeUrl: "",
            activeIndex:"1",
            activeOption:true,
            loginForm: {
                username: "",
                password: "",
                rememberMe: false,
                code: "",
                uuid: "",
            },
            telephoneForm: {
                phonenumber: "",
                code: "",
                uuid: "",
            },
            loginRules: {
                username: [
                    { required: true, trigger: "blur", message: "用户名不能为空" }
                ],
                password: [
                    { required: true, trigger: "blur", message: "密码不能为空" }
                ]
                // code: [
                //     { required: true, trigger: "blur", message: "验证码不能为空" }
                // ]
            },
            telRules: {
                phonenumber: [
                    { required: true, message: "手机号码不能为空", trigger: "blur" },
                    {
                        pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
                        message: "请输入正确的手机号码",
                        trigger: "blur"
                    }
                    ]
            },
            loading: false,
            disabled:false,
            btnTitle:"获取验证码",
            qrShow:false,
            downloadData:{
                url:"",
                icon:require("../assets/images/ahjw.png"),
                title:""
            }
        }
    },
    created() {
        // this.getCode();
        this.getCookie();
    },
    mounted() {
        window.addEventListener('keydown', this.keyDown);
    },
    // destroyed() {
    //     window.removeEventListener('keydown', this.keyDown, false);
    // },
    methods: {
        keyDown(e) {
            //如果是回车则执行登录方法
            if (e.keyCode == 13&&this.loginForm.uuid!="") {
                this.handleLogin();
            }
        },
        getCookie() {
            const username = Cookies.get("username");
            const password = Cookies.get("password");
            const rememberMe = Cookies.get('rememberMe');
            this.loginForm = {
                username: username === undefined ? this.loginForm.username : username,
                password: password === undefined ? this.loginForm.password : decrypt(password),
                rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
            };
        },
        //用户登录
        userLogin() {
            this.$refs.loginForm.validate(valid => {
                if (valid) {
                    this.loading = true;
                    if (this.loginForm.rememberMe) {
                        Cookies.set("username", this.loginForm.username, { expires: 30 });
                        Cookies.set("password", encrypt(this.loginForm.password), { expires: 30 });
                        Cookies.set('rememberMe', this.loginForm.rememberMe, { expires: 30 });
                    } else {
                        Cookies.remove("username");
                        Cookies.remove("password");
                        Cookies.remove('rememberMe');
                    }
                    this.$store.dispatch("Login2", this.loginForm).then(() => {
                        this.$router.push("/");
                        this.loginForm.uuid = ""
                    }).catch(() => {
                        this.loading = false;
                        this.getCode();
                    })
                }
            });
        },
        //登录
        handleLogin(){
             if(this.activeOption){
                 this.userLogin()
             }
             else{
                 this.telephoneLogin()
             }
        },
        //短信登录
        telephoneLogin(){
           this.$refs.telephoneForm.validate(valid => {
               if (valid) {
                   this.$store.dispatch("Login2", this.telephoneForm).then(() => {
                        this.$router.push("/");
                        this.loginForm.uuid = ""
                    }).catch(() => {
                        this.loading = false;
                        this.getCode();
                    })
               }
            })
        },
        //发送短信
        sendClick(){
            this.$refs.telephoneForm.validate(valid => {
                if (valid) {
                console.log("发送验证码")
                this.validateBtn()
                }
            })
        },
        //倒计时
        validateBtn(){
            let time = 6;
            let timer = setInterval(() => {
                if(time == 0) {
                    clearInterval(timer);
                    this.disabled = false;
                    this.btnTitle = "获取验证码";
                } else {
                    this.btnTitle =time + '秒后重试';
                    this.disabled = true;
                    time--
                }
                },1000)
            },
        //忘记密码
        forgetPassword() {
            this.msgInfo("请联系管理员重置密码！")
        },
        getCode() {
            getCodeImg().then(res => {
                this.codeUrl = "data:image/jpg;base64," + res.img;
                this.loginForm.uuid = res.uuid;
            });
        },
        handleSelect(key, keyPath){
            if(key=='2'){
                this.activeIndex='2'
                this.$refs['loginForm'].resetFields();
                this.activeOption = false
            }
            else{
                this.activeIndex='1'
                this.activeOption = true
            }
        },
        wechatLogin(){
            this.qrShow = true
            this.downloadData.title = "微信"
        },
        //注册
        regist(){},
        // 钉钉登录
        dingLogin(){
            this.qrShow = true
            this.downloadData.title = "钉钉"
        },
        // 返回用户登录
        returnLogin(){
            this.qrShow = false
        },
        //刷新二维码
        refreshQRcode(){
        }
    }
}
</script>
<style lang="scss" >
.login {
    // display: flex;
    // justify-content: center;
    // align-items: center;
    height: 100%;
    background-image: url("../assets/images/login-background.png");
    background-size: cover;
    .discriptbox{
        width: 640px;
        height: 551px;
        background-size: cover;
        background-image: url("../assets/images/login_2.png");
        position: absolute;
        bottom: 99px;
        left: 60px;
    }
}

.title {
    font-size: 24px;
    margin: 10px auto 35px auto;
    text-align: center;
    color: #000;
    font-weight: 400;
    display: block;
}

.login-form {
    position: absolute;
    bottom: 99px;
    right: 60px;
    width: 440px;
    box-sizing: border-box;
    height: 371px;
    border-radius: 6px;
    background:rgba(255, 255, 255, 0.6);
    padding: 25px 58px;
}
.input-icon {
    height: 39px;
    width: 14px;
    margin-left: 2px;
}

.login-tip {
    font-size: 13px;
    text-align: center;
    color: #bfbfbf;
}
.login-code {
    width: 33%;
    height: 38px;
    float: right;
    overflow: hidden;
    border-radius: 5px;
}
.login-code img {
    cursor: pointer;
    /* vertical-align: middle; */
}
.el-login-footer {
    height: 40px;
    line-height: 40px;
    position: fixed;
    bottom: 0;
    width: 100%;
    text-align: center;
    color: #fff;
    font-family: Arial;
    font-size: 12px;
    letter-spacing: 1px;
}
.login-code-img {
    height: 38px;
    width: 100%;
}
el-form-item {
    margin-bottom: 30px;
}
.forget {
    display: inline-block;
    padding-left: 10px;
    line-height: 19px;
    font-size: 10px;
    float: right;
    cursor: pointer;
    color: #000;
}
.is-required{
     margin-bottom:15px;
}
.userInput {
    margin-bottom: 28px;
}
.el-menu-demo{
    background: rgba(255,255,255,0);
    margin-bottom: 10px;
    li{
        display: inline-block;
        width: 50%;
        text-align: center;
        line-height: 38px !important;
        height: 38px !important;
        }
    li:hover{
        background: rgba(255,255,255,0) !important;
        color: #909399;
    }
    .el-menu-item:focus, .el-menu-item:hover {
        outline: 0;
        background-color: rgba(255,255,255,0);
     }

}
.otherLogin{
    .discript{
        float: left;
        line-height: 27px;
    }
    .img{
        display: inline-block;
        width: 24px;
        height: 24px;
        // background: chocolate;
        // position: relative;
        // top:5px;
        clear:both;
        cursor: pointer;
        background-size: cover;
        margin-left: 10px;
    }
    .wechat{
        background-image: url("../assets/images/wechat.png");
        background-size: cover;

    }
    .dingding{
        background-image: url("../assets/images/dingding.png");
        background-size: cover;
    }
    .regist{
        float: right;
        display: block;
        color: rgba(48, 102, 255, 1);
        cursor: pointer;
        line-height: 27px;
    }
}
.QRcode{
    text-align: center;
    h2{
        margin-bottom: 28px;
    }
    .tip{
        font-size: 14px;
        color:rgba(34, 34, 34, 1);
        }
    .refresh{
       color: rgba(48, 102, 255, 1);
        cursor: pointer;
        font-size: 14px;     
    }
    .return{ 
        color: rgba(48, 102, 255, 1);
        cursor: pointer;
        font-size: 14px;
        margin-top: 46px;
        }
}
</style>